<template>
    <div class="content">
        <div id="cart-title">
            个人信息
        </div>
        <br>
        <div class="change-user-info">
            <p class="account-title">更改个人信息</p>
            <el-form :model="ruleForm2"
                     :rules="rules2"
                     ref="ruleForm2"
                     label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="昵称"
                              prop="nickName"
                              required>
                    <el-input v-model="ruleForm2.nickName"></el-input>
                </el-form-item>
                <el-form-item label="性别"
                              prop="gender">
                    <el-select v-model="ruleForm2.gender"
                               placeholder="请选择性别">
                        <el-option label="男"
                                   value="true"></el-option>
                        <el-option label="女"
                                   value="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="生日"
                              required>
                    <el-form-item prop="birthday">
                        <el-date-picker type="date"
                                        placeholder="选择日期"
                                        v-model="ruleForm2.birthday"
                                        style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="手机"
                              prop="phoneNumber"
                              required>
                    <el-input v-model="ruleForm2.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="邮箱"
                              prop="email"
                              required>
                    <el-input v-model="ruleForm2.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="submitForm('ruleForm2')">确认修改</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style>
.change-user-info {
    width: 40%;
}
</style>
<script>

export default {
    data() {
        var checkPhoneNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入联系电话 '));
            } else {
                callback();
            }
        };
        var checkNickName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入昵称'));
            } else {
                callback();
            }
        };
        return {
            ruleForm2: {
                nickName: '',
                gender: '',
                birthday: '',
                phoneNumber: '',
                email: ''
            },
            rules2: {
                birthday: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                nickName: [
                    { validator: checkNickName, trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                phoneNumber: [
                    { validator: checkPhoneNumber, trigger: 'blur' }
                ]
                ,
                email: [
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            var _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var token = JSON.parse($.cookie('front-token'));
                    $.ajax({
                        type: "Patch",
                        url: "/api/User/ChangeUserInfo",
                        headers: {
                            Authorization: "Bearer " + token.access_token
                        },
                        data: {
                            NickName: _this.ruleForm2.nickName,
                            Gender: _this.ruleForm2.gender,
                            Birthday: _this.ruleForm2.birthday,
                            PhoneNumber: _this.ruleForm2.phoneNumber,
                            Email: _this.ruleForm2.email
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data != null) {
                                _this.$store.dispatch('setUserInfoactions',
                                    data
                                );
                                var user = JSON.stringify(data);
                                $.cookie('user', user, {
                                    path: '/'
                                });
                                _this.Success("修改成功")
                            } else {
                                _this.Failed("修改失败，请核对登录信息")
                            }

                        },
                        error: function (msg) {
                            _this.Failed("系统故障")
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        Success(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'success'
            });
        },
        Failed(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'error'
            });
        }
    }
}
</script>
 